<template>
  <main>
    <div class="S">
      <li id="home" @click="allBooksThisClass">({{ this.$route.params.id }})查看全部</li>
      <li id="user">
        <div class="userL" v-if="isLogin == false">
          <div>登录使用全部功能</div>
        </div>
        <div class="topAU" v-if="isLogin == true">
          <div class="userMsg" @click="thisUser">
            <li id="userA">
              <img :src="this.$store.state.userData.userAvatar" alt="" />
            </li>
            <li>你好,{{ this.$store.state.userData.userName }}</li>
          </div>
        </div>
      </li>
    </div>
    <div class="allClass">
      <li class="end">
        <h4>完结精品</h4>
        <div v-for="item in thisEnd" :key="item._id">
            <h2 @click="toBook(item._id)">{{item.bookname}}</h2>
            <h3 @click="toWriter(item.writerid)">{{item.writername}} 著</h3>
            <h5 v-if="item.isend == 0">连载中</h5>
            <h5 v-if="item.isend == 1">完结</h5>
        </div>
      </li>
      <li class="editor">
        <h4>编辑推荐</h4>
        <div v-for="item in thisEditor" :key="item._id">
            <h2 @click="toBook(item._id)">{{item.bookname}}</h2>
            <h3 @click="toWriter(item.writerid)">{{item.writername}} 著</h3>
            <h5 v-if="item.isend == 0">连载中</h5>
            <h5 v-if="item.isend == 1">完结</h5>
        </div>
      </li>
      <li class="serial">
        <h4>热门连载</h4>
        <div v-for="item in thisHot" :key="item._id"> 
            <h2 @click="toBook(item._id)">{{item.bookname}}</h2>
            <h3 @click="toWriter(item.writerid)">{{item.writername}} 著</h3>
            <h5 v-if="item.isend == 0">连载中</h5>
            <h5 v-if="item.isend == 1">完结</h5>
        </div>
      </li>
      <li class="new">
        <h4>新书首发</h4>
        <div v-for="item in thisNew" :key="item._id">
            <h2 @click="toBook(item._id)">{{item.bookname}}</h2>
            <h3 @click="toWriter(item.writerid)">{{item.writername}} 著</h3>
            <h5 v-if="item.isend == 0">连载中</h5>
            <h5 v-if="item.isend == 1">完结</h5>
        </div>
      </li>
    </div>
  </main>
</template>

<script>
export default {
  created() {
    this.getThisClassNew();
    this.getThisClassEditor();
    this.getThisClassHot();
    this.getThisClassEnd();
    if (window.sessionStorage.getItem("userName") != null) {
      this.isLogin = true;
      this.thisUserId = window.sessionStorage.getItem("userId");
    }
    this.thisClass = this.$route.params.id;
  },
  data() {
    return {
      isLogin: false,
      thisClass:"",
      thisNew:[],
      thisEnd:[],
      thisEditor:[],
      thisHot:[],
    };
  },
  methods: {
    //路由
    thisUser() {
      let routeUrl = this.$router.resolve(
        `/thisUser/${window.sessionStorage.getItem("userId")}`
      );
      window.open(routeUrl.href, "_blank");
    },
    toBook(id){
      let routeUrl = this.$router.resolve(`/tobook/${id}`);
      window.open(routeUrl.href, "_blank");
    },
    toWriter(id){
      let routeUrl = this.$router.resolve(`/toWriter/${id}`);
      window.open(routeUrl.href, "_blank");
    },


    allBooksThisClass(){
      let routeUrl = this.$router.resolve(
        `/thisClassBooks/${this.thisClass}`
      );
      window.open(routeUrl.href, "_blank");
    },
    async getThisClassNew() {
      const { data: res } = await this.$http.post(`/home/classTuiNew`, {
        isclass: this.$route.params.id,
      });
      this.thisNew = res.data;
    },
    async getThisClassEditor() {
      const { data: res } = await this.$http.post(`/home/classTuiEditor`, {
        isclass: this.$route.params.id,
      });
      this.thisEditor = res.data;
    },
    async getThisClassHot() {
      const { data: res } = await this.$http.post(`/home/classTuiHot`, {
        isclass: this.$route.params.id,
      });
      this.thisHot = res.data;
      //console.log(this.thisHot);
    },
    async getThisClassEnd() {
      const { data: res } = await this.$http.post(`/home/classTuiEnd`, {
        isclass: this.$route.params.id,
      });
      this.thisEnd = res.data;
      //console.log(this.thisEnd);
    },
  },
};
</script>

<style lang="less" scoped>
li {
  display: flex;
  list-style: none;
}
//主体盒子
main {
  min-height: 1800px;
  width: 100%;
  background-color: rgb(243, 252, 233);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.S {
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(110, 109, 109);
  font-size: 24px;
  color: white;
}
.S #home:hover {
  background-color: black;
  cursor: pointer;
}
.S li:nth-child(1) {
  height: 100%;
  width: 170px;
  margin-left: 15px;
  justify-content: center;
  align-items: center;
}
.userMsg:hover {
  color: red;
  cursor: pointer;
}
#user {
  display: flex;
  flex-direction: row;
}
#userA {
  width: 50px;
  margin-right: 9px;
}
.userL {
  display: flex;
  margin-right: 30px;
}
.userL div {
  display: flex;
  margin-right: 5px;
  margin-left: 5px;
}
.userMsg img {
  height: 50px;
  width: 50px;
}
.userMsg {
  display: flex;
  align-items: center;
  margin-right: 5px;
  margin-left: 5px;
}
.topAU {
  display: flex;
  align-items: center;
  margin-right: 40px;
}
.allClass {
  width: 80%;
  min-height: 1800px;
  display: flex;
  flex-wrap: wrap;
}
.allClass li:nth-child(1) {
  width: 49%;
  height: 600px;
  border-style: dashed;
  border-width: 0px 1px 1px 1px;
  overflow: hidden;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  background-color: #fff;
}
.new div {
  height: 200px;
  width: 150px;
  border-style: solid;
  border-width: 1px;
}
.allClass li:nth-child(2) {
  width: 49%;
  height: 600px;
  border-style: dashed;
  border-width: 0px 1px 1px 0px;
  overflow: hidden;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  //align-content: space-around;
  background-color: #fff;
}
.editor div {
  height: 200px;
  width: 150px;
  border-style: solid;
  border-width: 1px;
}
.allClass li:nth-child(3) {
  width: 98%;
  height: 600px;
  border-style: dashed;
  border-width: 0px 1px 1px 1px;
  overflow: hidden;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  background-color: #fff;
}
.serial div {
  height: 200px;
  width: 150px;
  border-style: solid;
  border-width: 1px;
}
.allClass li:nth-child(4) {
  width: 98%;
  height: 600px;
  border-style: dashed;
  border-width: 0px 1px 1px 1px;
  overflow: hidden;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  background-color: #fff;
}
.end div {
  height: 200px;
  width: 150px;
  border-style: solid;
  border-width: 1px;
}
h2:hover{
  color: blue;
  cursor: pointer;
}
h3:hover{
  color:green;
  cursor: pointer;
}
</style>
